<template>
	<div class="game-container">
		<div class="params">
			<el-form
				ref="form"
				:model="ruleForm"
				label-width="80px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item :label="`${$t('dxn.card_ables_list.table_id')}`">
					<el-input
						v-model.trim="ruleForm.tableCode"
						v-input="{ name: 'noEmpty' }"
						clearable
						style="width: 230px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item label="鱿鱼轮次">
					<el-input
						v-model.trim="ruleForm.round"
						v-input="{ name: 'int' }"
						clearable
						style="width: 150px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content">
			<span>基本信息</span>
			<el-divider></el-divider>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				border
				:data="squidDetailList"
				style="width: 100%"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
			>
				<el-table-column
					:label="tableColumns.tableCode"
					min-width="190"
					align="center"
					prop="tableCode"
				>
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="
								$router.push({
									path:
										'/dxn/gameManager/cardTablesList/cardTablesBase',
									query: {
										tableId: scope.row.tableCode
									}
								})
							"
						>
							{{ scope.row.tableCode }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.tableName"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.tableName }}
					</template>
				</el-table-column>
				<el-table-column
					label="牌桌所属俱乐部ID"
					min-width="125"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.clubId"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.tableType"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.tableType, 'gameType') }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidModel"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidModelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.mostSquidWinsSwitch"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.mostSquidWinsSwitch === 2
								? '开启'
								: '未开启'
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.capotSquidNumberLowerLimit"
					min-width="135"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							scope.row.mostSquidWinsSwitch === 2
								? scope.row.capotSquidNumberLowerLimit
								: '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					:label="tableColumns.bbBlindScore"
					min-width="150"
					align="center"
				>
					<template slot-scope="scope">
						<ShowBlindInjection
							:tableType="scope.row.tableType"
							:bbBlindScore="scope.row.bbBlindScore"
							:sbBlindScore="scope.row.sbBlindScore"
							:anteSwitch="scope.row.anteSwitch"
							:anteScore="scope.row.anteScore"
							:straddleAmount="scope.row.straddleAmount"
						/>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidRewardValue"
					min-width="100"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidRewardValue }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidRewardPrice"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidRewardPrice
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.round"
					min-width="100"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.round }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidNumber"
					min-width="100"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidNumber }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					min-width="135"
					show-overflow-tooltip
				>
					<template #header>
						<span>
							{{ tableColumns.validSquidNumberTotal }}
							<el-popover
								placement="top-start"
								width="auto"
								trigger="hover"
							>
								<div>有效鱿鱼数是实际计算鱿鱼输赢的数量</div>
								<div>
									普通鱿鱼时，玩家有鱿鱼时，无论几条仅计算为鱿鱼数1条
								</div>
								<div>无限鱿鱼时，有效鱿鱼数等于玩家鱿鱼数</div>
								<div>
									无限鱿鱼且开独赢时，有效鱿鱼数等于玩家鱿鱼数
									+ 所有玩家放弃鱿鱼数
								</div>
								<div>
									有玩家认输时，场上没有鱿鱼的玩家会获得1条有效鱿鱼
								</div>
								<span slot="reference">
									<i class="el-icon-question"></i>
								</span>
							</el-popover>
						</span>
					</template>
					<template slot-scope="scope">
						{{ scope.row.validSquidNumberTotal }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.settleType"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.settleTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="会员账号"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userNames || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="会员昵称"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickNames || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidSettleList"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidSettleList || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.beginHandCode"
					min-width="190"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.beginHandCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.beginHandNum"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.beginHandNum }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.handBeginTimeStr"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.handBeginTimeStr || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.settleHandCode"
					min-width="190"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.settleHandCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.settleHandNum"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.settleHandNum || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.handEndTimeStr"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.settleTimeStr || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidRewardAmount"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidRewardAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidCompensationAmount"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidCompensationAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="tableColumns.squidWalletPay"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidWalletPay
							)
						}}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content">
			<span>鱿鱼结算(当前轮)</span>
			<el-divider></el-divider>
			<el-table
				ref="refSquidSettleTable"
				size="mini"
				class="small-size-table"
				border
				:data="squidSettleList"
				style="width: 100%"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
				@sort-change="handleSquidSettleTableSort"
				:cell-style="getSquidGiveUpStyle"
			>
				<el-table-column
					type="index"
					label="序号"
					width="70"
					align="center"
				/>
				<el-table-column
					label="会员账号"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="会员昵称"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="会员所属俱乐部ID"
					min-width="125"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.userClubId"
							class="text-link"
							@click="
								$router.push({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.userClubId
									}
								})
							"
						>
							{{ scope.row.userClubId }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼数"
					min-width="100"
					align="center"
					prop="squidNumber"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.squidNumber }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					min-width="135"
					show-overflow-tooltip
				>
					<template #header>
						<span>
							有效鱿鱼数
							<el-popover
								v-if="isShowValidSquidNumberTips"
								placement="top-start"
								width="auto"
								trigger="hover"
							>
								<div>
									开启鱿鱼最多者独赢时，赢家鱿鱼数要加上所有玩家放弃鱿鱼数
								</div>
								<span slot="reference">
									<i class="el-icon-question"></i>
								</span>
							</el-popover>
						</span>
					</template>
					<template slot-scope="scope">
						{{ scope.row.validSquidNumberStr || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="输赢状态"
					min-width="80"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidStatusName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="结算状态"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidSettleTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="离开类型"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.squidLeaveStatusName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼奖励"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="squidRewardAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidRewardAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼支付"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="squidCompensationAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidCompensationAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼输赢"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="squidNetAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidNetAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼钱包支付"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="squidWalletPay"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.squidWalletPay
							)
						}}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content">
			<span>鱿鱼过程</span>
			<el-divider></el-divider>
			<el-table
				ref="squidProcessTable"
				size="mini"
				class="small-size-table"
				border
				:data="squidProcessList"
				style="width: 100%"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
			>
				<el-table-column
					type="index"
					label="序号"
					width="80"
					align="center"
				/>
				<el-table-column
					label="手牌ID"
					show-overflow-tooltip
					min-width="190"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.handCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column label="手牌号" min-width="90" align="center">
					<template slot-scope="scope">
						{{ scope.row.handNum || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="手牌开始时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.handBeginTimeStr || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="手牌结束时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.handEndTimeStr || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼获得玩家"
					min-width="135"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span v-if="scope.row.winUserName" class="nameStyle">
							{{ scope.row.winUserName }}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					label="当前鱿鱼数"
					align="center"
					:min-width="squidResultColumnWidth"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div class="showSquidResultDiv">
							<div
								v-for="(item, key) in handleProcessSquidResult(
									scope.row.squidResult
								)"
								:key="key"
								class="itemStyle"
							>
								<span
									:class="
										scope.row.winUserName === item.key
											? 'nameStyle'
											: ''
									"
								>
									{{ item.key }}
								</span>
								<span class="numStyle">
									{{ item.val }}
								</span>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="120" align="center">
					<template slot-scope="scope">
						<div
							class="text-link"
							@click="handleShowGameReplay(scope.$index)"
						>
							牌局回顾
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="squidProcessTotalCount"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="squidProcessTotalCount"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</div>
		<GameReplay
			:dialogVisible.sync="gameReplay.visible"
			:dialogLoading="gameReplay.loading"
			:replayDetail="gameReplay.replayDetail"
			:replayList="gameReplay.replayList"
			:replayReqResult="gameReplay.replayReqResult"
		>
			<div slot="lastNextButton" class="arrowStyel">
				<el-link
					type="primary"
					:underline="false"
					@click="handlePrevGameReplay"
					:disabled="isHandlePrev"
				>
					<i class="el-icon-d-arrow-left"></i>
					{{ $t('game.game_betslip.previous') }}
				</el-link>
				<span>
					{{ currentGameReplayIndex + 1 }}
					/
					{{ totalGameReplayCount }}
				</span>
				<el-link
					type="primary"
					:underline="false"
					@click="handleNextGameReplay"
					:disabled="isHandleNext"
				>
					{{ $t('game.game_betslip.next') }}
					<i class="el-icon-d-arrow-right"></i>
				</el-link>
			</div>
		</GameReplay>
	</div>
</template>
<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import GameReplay from '@/components/GameReplay'
import { getGameReplayDetail } from '@/utils/replay'
import { squidModels, squidSettleTypes } from '@/dict/dxn'
import ShowBlindInjection from '@/components/Dxn/ShowBlindInjection'
import { tableColumns } from '@/views/dxn/squidManager/components/tableColumn'
export default {
	name: routerNames.squidDetail,
	components: {
		GameReplay,
		ShowBlindInjection
	},
	mixins: [list],
	data() {
		return {
			loading: false,
			ruleForm: {
				tableCode: undefined,
				round: undefined
			},
			handStatus: 0, // 2为异常局
			replayQuery: {
				roundNo: 0, // 手牌num
				tableId: 0 // 牌桌Id
			},
			gameReplay: {
				visible: false,
				loading: false,
				replayDetail: {},
				replayList: [],
				replayReqResult: ''
			},
			isShowValidSquidNumberTips: 0,
			currentGameReplayIndex: 0,
			totalGameReplayCount: 0,
			currentGameReplayRow: {},
			gameReplayLoading: false,
			squidDetailList: [],
			squidSettleList: [],
			squidProcessList: [],
			squidProcessTotalCount: 0,
			squidResultColumnWidth: 600,
			sortSquidSettleParams: {},
			tableColumns,
			squidModels,
			squidSettleTypes
		}
	},
	computed: {
		isHandlePrev() {
			return this.gameReplayLoading || this.currentGameReplayIndex <= 0
		},
		isHandleNext() {
			return (
				this.gameReplayLoading ||
				this.currentGameReplayIndex >= this.totalGameReplayCount - 1
			)
		},
		gameTypes() {
			return this.globalDics.gameTypes || []
		}
	},
	watch: {
		$route: function(to, from) {
			if (to.path.indexOf(routerNames.squidDetail) > -1) {
				this.getRouteQuery()
			}
		}
	},
	created() {
		this.getRouteQuery()
	},
	methods: {
		getRouteQuery() {
			if (this.$route.query.tableCode || this.$route.query.round) {
				Object.keys(this.ruleForm).forEach((key) => {
					this.ruleForm[key] = ''
				})
				this.ruleForm.tableCode = this.$route.query.tableCode || ''
				this.ruleForm.round = this.$route.query.round || ''
			}
			this.getDatalist()
		},
		getSquidGiveUpStyle({ row }) {
			// 放弃的状态展示为4
			if (row?.squidStatus === 4) {
				return 'pointer-events: none;cursor: not-allowed;border-color: #d7d7d7;background-color: #d7d7d7;'
			}
			return ''
		},
		getSearchParam() {
			const params = {
				tableCode: this.ruleForm.tableCode,
				round: Number(this.ruleForm.round)
			}
			return params
		},
		search() {
			if (!this.ruleForm.tableCode || !this.ruleForm.round) {
				this.$message.closeAll()
				this.$message.warning('牌桌ID和鱿鱼轮次不能为空')
				return
			}
			this.sortSquidSettleParams = {}
			this.$refs?.refSquidSettleTable?.clearSort()
			this.getDatalist()
		},
		getDatalist() {
			if (this.ruleForm.tableCode && this.ruleForm.round) {
				this.getSquidDetailList()
				this.getSquidSettleList()
				this.pageNum = 1
				this.getSquidProcessList()
			}
		},
		// 鱿鱼信息
		getSquidDetailList() {
			this.loading = true
			this.squidDetailList = []
			const params = this.getSearchParam()
			this.$api
				.getSquidDetailInfoBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200 && res?.data) {
						this.squidDetailList = [res?.data]
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 列表排序
		handleSquidSettleTableSort({ prop, order }) {
			this.sortSquidSettleParams = {}
			this.sortSquidSettleParams.orderByField = prop
			// 升序
			if (order === 'ascending') {
				this.sortSquidSettleParams.orderByMode = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.sortSquidSettleParams.orderByMode = 'desc'
			} else {
				this.sortSquidSettleParams.orderByField = undefined
				this.sortSquidSettleParams.orderByMode = undefined
			}
			this.getSquidSettleList()
		},
		// 鱿鱼结算
		getSquidSettleList() {
			this.squidSettleList = []
			// 是否显示tips 0：不显示，1：显示
			this.isShowValidSquidNumberTips = 0
			const params = {
				...this.sortSquidSettleParams,
				...this.getSearchParam()
			}
			this.$api
				.getSquidDetailSettleListBend(params)
				.then((res) => {
					if (res?.code === 200 && Array.isArray(res?.data)) {
						this.squidSettleList = res?.data || []
						this.isShowValidSquidNumberTips =
							this.squidSettleList.find(
								(item) => item.tipsFlag === 1
							)?.tipsFlag || 0
					}
				})
				.catch(() => {})
		},
		// 鱿鱼获得过程
		getSquidProcessList() {
			this.squidProcessList = []
			this.totalGameReplayCount = 0
			const params = this.getParams(this.getSearchParam())
			this.$api
				.getSquidDetailProcessListBend(params)
				.then((res) => {
					if (res?.code === 200) {
						this.squidProcessList = res?.data?.record || []
						this.squidProcessTotalCount =
							res?.data?.totalRecord || 0
						this.totalGameReplayCount = this.squidProcessList.length
						this.renderSquidResultWidth()
					}
				})
				.catch(() => {})
		},
		// 动态获取列宽度
		renderSquidResultWidth() {
			setTimeout(() => {
				const divArr = document.getElementsByClassName(
					'showSquidResultDiv'
				)
				const divLen = divArr.length
				const widthArr = []
				for (let i = 0; i < divLen; i++) {
					widthArr.push(divArr[i]?.offsetWidth || 0)
				}
				const maxWidth = Math.max(...widthArr)
				if (maxWidth) {
					this.squidResultColumnWidth = maxWidth + 24
				}
			}, 200)
		},
		// 处理当前鱿鱼数
		handleProcessSquidResult(squidResultStr) {
			let squidResultArr = []
			try {
				if (squidResultStr) {
					const squidResultObj = JSON.parse(squidResultStr)
					Object.keys(squidResultObj).forEach((key) => {
						squidResultArr.push({
							key: key,
							val: squidResultObj[key]
						})
					})
				}
			} catch (error) {
				squidResultArr = []
			}
			return squidResultArr
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.getSquidProcessList()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.getSquidProcessList()
		},
		// 打开牌局回顾
		handleShowGameReplay(currentIndex) {
			this.currentGameReplayIndex = currentIndex
			this.gameReplay = {
				visible: true,
				loading: true,
				replayDetail: {
					info: {
						handId: ''
					},
					handStatus: undefined
				},
				replayList: [],
				replayReqResult: ''
			}
			this.getGameReplayData()
		},
		// 牌局回顾上一页
		handlePrevGameReplay() {
			if (this.currentGameReplayIndex > 0) {
				this.currentGameReplayIndex--
				this.getGameReplayData()
			}
		},
		// 牌局回顾下一页
		handleNextGameReplay() {
			if (this.currentGameReplayIndex < this.totalGameReplayCount - 1) {
				this.currentGameReplayIndex++
				this.getGameReplayData()
			}
		},
		// 获取牌局回顾数据
		getGameReplayData() {
			this.gameReplayLoading = true
			this.currentGameReplayRow =
				this.squidProcessList[this.currentGameReplayIndex] || {}
			if (this.currentGameReplayRow.handStatus === 0) {
				this.gameReplay.replayDetail.info.handId = this.currentGameReplayRow.handCode
				this.gameReplay.replayReqResult = '没有记录'
				this.gameReplay.loading = false
				this.gameReplayLoading = false
				return false
			}
			this.replayQuery = {
				tableId: this.currentGameReplayRow.tableId,
				roundNo: this.currentGameReplayRow.handNum
			}
			getGameReplayDetail(this)
				.then((ret) => {
					this.gameReplay.replayDetail = ret.replayDetail
					this.gameReplay.replayList = ret.replayList
				})
				.catch((ret) => {
					this.gameReplay.replayReqResult = ret.message
				})
				.finally(() => {
					this.gameReplay.replayDetail.info.handId = this.currentGameReplayRow.handCode
					this.gameReplay.replayDetail.handStatus = this.currentGameReplayRow.handStatus
					this.gameReplay.loading = false
					this.gameReplayLoading = false
				})
		}
	}
}
</script>
<style lang="scss" scoped>
.arrowStyel {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}
.showSquidResultDiv {
	white-space: nowrap;
	display: inline-block;
}
.itemStyle {
	display: inline-block;
	margin-right: 4px;
}
.nameStyle {
	color: #f59d2a;
}
.numStyle {
	color: #8400ff;
}
.giveUpRowStyle {
	pointer-events: none;
	cursor: not-allowed;
	border-color: #d7d7d7;
	background-color: #d7d7d7;
}
::v-deep .el-icon-question:after {
	font-size: 14px;
	margin-left: -2px;
}
</style>
